import React, { useState, useEffect } from 'react'

function App() {

    const [list, setList] = useState([]);

    useEffect(() => {
        console.log(1)
        setTimeout(() => {
            fetch('http://127.0.0.1:3030/api/food/getFoodList', {
                method: 'get',
                headers: {
                    "token": '123123'
                }
            }).then((response) => {
                return response.json()
            }).then((result) => {
                console.log(2)
                if (`${result.code}` === '0') {
                    setList(result.data || []);
                }
            })
        }, 600)
    }, []);

    return (
        <>
            <div className="app-page-title">hello pwa basic</div>
            <div className="list-container">
                {
                    list.map((item, index) => {
                        return (
                            <div className="list-item" key={index}>
                                <div className="list-item-content">
                                    <img src={item.albums[0]} className="item-img" alt='' />
                                    <div className="item-bottom">
                                        <p className="item-title">{item.title}</p>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }

            </div>
        </>
    )
}


export default App;